<template>
    <div>
        <!-- 头部 -->
        <van-nav-bar
            title="不凡"
            left-text="返回"
            @click-left="onClickLeft"
            />
        
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
        <div class="box-info" v-for="item in infolist" :key="item.id" @click="headListinfo(item)">
                    <img :src="item.app_list_pic_url" alt="">
                    <p>{{item.name}}  |  {{item.floor_price}}起</p> 
        </div>
</van-list>
    </div>
</template>

<script>
import {headList} from "../../../api/Home/index.js"
    export default {
            data() {
                return {
                    finished:false,
                    loading:false,
                    infolist:[],


                }
            },
            methods: {
                onClickLeft(){
                    this.$router.go(-1)
                },
                onLoad(){
                    
                    headList(
                        {page:this.$route.query.page}
                    ).then(res=>{
                        console.log(res);
                        this.infolist.push(...res.data)
                        this.$route.query.page++
                        this.loading = false
                        if(res.total == this.$route.query.page-1){

                            this.finished = true
                        }
                    })
                },
                headListinfo(item){
                        this.$router.push({name:"Introduction",params:{listinfo:item}})
                }
            },
            created(){

            }
    }
</script>

<style lang="scss" scoped>
    .box-info {
        width: 100%;
        height: 208px;
        background-color: red;
        margin-top: 5px;
        position: relative;
        img {
            display: block;
            width: 100%;
            height: 100%;
            background-color: green;
        }
        :nth-child(2){
            display: block;
            width: 100%;
            color: #ffffff;
            font-size: 16px;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -8px;
            margin-left: -50%;
          
           
        }
    }
</style>